<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
</style>
<template>
  <!-- 
     :picker-options="{
              disabledDate: (time) =>
                !(
                  time.getTime() >= Date.now() - 365 * 8.64e7 &&
                  time.getTime() < Date.now() - 8.64e7
                ),
            }"
   -->
  <div style="margin-right: 10px">
    <el-card style="margin-bottom: 16px">
      <div slot="header" style="display: flex; justify-content: space-between">
        <span>{{ query.salesGrade ? query.salesGrade : query.proBrandList ? query.salesGrade : query.proBrandList + " " }}
          商品全局概况 </span>
        <span>
          <span> 自定义日期</span><el-date-picker style="margin-left: 5px; width: 250px" v-model="value2" type="daterange"
            align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions" @change="getselectCommodityOverview" size="mini" /></span>
      </div>
      <KoiCardI :itemData="SaleProductdata" style="margin-bottom: 10px" />
      <KoiCardII :itemData="SaleProductdata" />
    </el-card>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-collection"></i>{{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }}商品{{
              parseTime(value2[0], "{y}-{m}-{d}")
            }}-{{ parseTime(value2[1], "{y}-{m}-{d}") }}销售目标</span>
          </div>

          <div class="content" style="font-size: 14px; margin-left: 5px">
            销售目标
            <!-- <span >
              {{ SaleProductdata.salesAmount }}万</span
            > -->
          </div>
          <div class="content" style="font-weight: bold; font-size: 20px">
            <!-- 销售目标 -->
            <span> {{ twoFixed(SaleProductdata.targetAmount) }}万</span>

            <!--    <div class="content" style="font-weight: bold; font-size: 14px">
                  自营:
                  <span style="font-size: 20px">
                    {{ itemData.quarterlySelfOperatedSales }}万</span
                  >
                  <span style="margin-left: 5px">
                    占比：{{ itemData.quarterlySelfOperatedSalesRatio }}%</span
                  >
                </div>
                <div class="content" style="font-weight: bold; font-size: 14px">
                  合作:
                  <span style="font-size: 20px">
                    {{ itemData.quarterlyInfluencerSales }}万</span
                  >
                  <span style="margin-left: 5px">
                    占比：{{ itemData.quarterlyInfluencerSalesRatio }}%</span
                  > -->
          </div>
          <div class="content">
            <card :id="'quarterly'" :chartData="echartDataquarterly" height="205px" width="500px"
              style="display: inline-block; position: relative" />
          </div>

          <div class="content">
            <progressYear :progressValue="SaleProductdata.yearProgress" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card style="margin-bottom: 16px">
          <div slot="header">
            {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }}品类{{
              parseTime(value2[0], "{y}-{m}-{d}")
            }}-{{ parseTime(value2[1], "{y}-{m}-{d}") }}销售占比
          </div>
          <PieChartI :chartData="PieChartData" id="PieChartData" />
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-card style="margin-bottom: 16px">
      <div slot="header">品类销售趋势</div>

      <div
        style="margin-left: 2px; margin-right: 2px; height: 410px"
        ref="salesQuantity"
      ></div>

      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column
          fixed
          prop="dataDateUnit"
          label="类别"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :formatter="stateFormat"
          v-for="(month, index) in months"
          :key="index"
          :prop="'salesData.' + index"
          :label="month"
          align="center"
          width="110"
        >
        </el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <div slot="header">同期品类销售额对比分析</div>
      <el-row :gutter="20">
        <el-col :span="16" :xs="24">
          <barLine :echartDataSku="barLineChart" />
        </el-col>
        <el-col :span="8" :xs="24">
          <el-table
            :data="barLineData"
            style="width: 100%"
            border
            :height="300"
          >
            <el-table-column
              prop="category1"
              label="类别"
              width="125"
            ></el-table-column>
            <el-table-column
              prop="salesAmount"
              label="销售额"
              width="150"
              :formatter="stateFormat"
            >
            </el-table-column>
            <el-table-column
              prop="yoySalesAmount"
              label="上一年销售额"
              width="150"
              :formatter="stateFormat"
            ></el-table-column>
            <el-table-column
              prop="salesAmountYoy"
              label="同比"
              width="100"
            ></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card> -->
  </div>
</template>
<script>
import * as echarts from "echarts/lib/echarts.js";
import {
  selectCategorySaleTend,
  selectCategorySaleYoy,
  selectCategorySaleAmountRatio,
  selectCommodityOverview,
} from "@/api/productStructure/BiCategoryBasicsDwd";
import LineChart from "./components/LineChart";
import barLine from "./components/barLine";
import PieChartI from "./components/PieChartI";
import card from "./components/card";
import progressYear from "./components/progressYear";
import KoiCardI from "./components/KoiCardI";
import KoiCardII from "./components/KoiCardII";
import moment from "moment";
export default {
  props: {
    query: {
      type: Object,
      default: () => { },
    },
  },
  components: {
    KoiCardI,
    KoiCardII,
    barLine,
    LineChart,
    PieChartI,
    progressYear,
    card,
  },
  data() {
    const end = new Date();
    end.setTime(end.getTime() - 1 * 24 * 60 * 60 * 1000); // 30天前
    const start = new Date(new Date().getFullYear(), 0, 1);
    return {
      rangeDate: [start, end],
      SaleProductdata: {},
      PieChartData: {
        xData: [],
        female: [],
      },
      tableData: [], // 用于存储转换后的数据
      months: [], // 用于存储所有月份
      //对比
      barLineChart: {},
      barLineData: [],
      echartDataquarterly: {
        value: 0,
        name: "",
        bg: "",
      },
      pickerOptions: {
        // disabledDate: (time) => {
        //   // 禁用所有超过今日的日期
        //   const today = new Date();
        //   today.setHours(0, 0, 0, 0); // 设置为当天0点
        //   return time.getTime() > today.getTime();
        // },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: [start, end], // 默认选中最近30天
    };
  },
  watch: {
    query: {
      handler: function (newnew, oldold) {
        // this.query.dateType = null;
        // this.getselectCategorySaleTend("salesQuantity");
        // this.getselectCategorySaleYoy();

        // this.getselectCategorySaleAmountRatio();
        this.getselectCommodityOverview();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.getselectCategorySaleAmountRatio();
    // this.getselectCommodityOverview();
  },
  methods: {
    getselectCommodityOverview() {
      // if (this.query.salesGrade.length < 0) {
      //   return
      // }
      let obj;
      let m1 = moment(this.value2[0]).format("YYYY-MM-DD");
      let m2 = moment(this.value2[1]).format("YYYY-MM-DD");
      obj = {
        // ...this.query,
        salesGrade: this.query.salesGrade,
        startDate: m1,
        endDate: m2,
      };
      // } else {
      //   obj = { ...this.query };
      // }

      this.getselectCategorySaleAmountRatio();
      selectCommodityOverview(obj).then((response) => {
        this.SaleProductdata = response;
        // this.echartDataquarterly.value = response.completeRate;
        // this.echartDataquarterly.name = "目标完成率";
        // if (response.completeRate > response.yearProgress) {
        //   this.echartDataquarterly.bg = "#2ba245";
        // } else {
        //   this.echartDataquarterly.bg = "#ff3334";
        // }
      });
    },
    getselectCategorySaleAmountRatio() {
      // if (this.query.salesGrade.length < 0) {
      //   return
      // }
      let obj;
      let m1 = moment(this.value2[0]).format("YYYY-MM-DD");
      let m2 = moment(this.value2[1]).format("YYYY-MM-DD");
      obj = {
        // ...this.query,
        salesGrade: this.query.salesGrade,
        startDate: m1,
        endDate: m2,
      };
      // if (!obj.salesGrade) {
      //   return
      // }
      selectCategorySaleAmountRatio(obj).then((response) => {
        // this.PieChartData = {
        //   xData: [],
        //   female: [],
        // };
        // this.PieChartData.xData = Object.keys(response);
        // this.PieChartData.female = Object.entries(response).map(
        //   ([name, value]) => ({
        //     value,
        //     name,
        //   })
        // );
        //饼图
        let row = [];
        response.forEach((item) => {
          row.push({
            value: item.salesAmount,
            name: item.category1,
          });
        });

        this.PieChartData.xData = response.map((item) => item.category1);
        this.PieChartData.female = row;
        console.log(JSON.stringify(this.PieChartData));
      });
      selectCommodityOverview(obj).then((response) => {
        // this.SaleProductdata = response;
        this.echartDataquarterly.value = response.completeRate;
        this.echartDataquarterly.name = "目标完成率";
        if (response.completeRate > response.yearProgress) {
          this.echartDataquarterly.bg = "#2ba245";
        } else {
          this.echartDataquarterly.bg = "#ff3334";
        }
      });
    },

    getselectCategorySaleYoy() {
      selectCategorySaleYoy(this.query).then((response) => {
        this.barLineData = response;
        this.barLineChart = {
          columns: ["品类", "销售额", "上一年销售额", , "同比"],
          rows: [],
        };

        response.forEach((item) => {
          this.barLineChart.rows.push({
            品类: item.category1,
            销售额: item.salesAmount,
            上一年销售额: item.yoySalesAmount,
            同比: item.salesAmountYoy ? item.salesAmountYoy : 0,
          });
        });
      });
    },
    getselectCategorySaleTend(property) {
      selectCategorySaleTend(this.query).then((response) => {
        this.tableData = []; // 用于存储转换后的数据
        this.months = []; // 用于存储所有月份
        // 提取所有月份
        response.categorySaleTendData.forEach((item) => {
          for (const month in item.keywordProperty) {
            // const element = array[index];
            if (!this.months.includes(month)) {
              this.months.push(month);
            }
          }
        });
        console.log(JSON.stringify(this.months));

        response.categorySaleTendData.forEach((item) => {
          const row = {
            dataDateUnit: item.dataDateUnit,
            salesData: [],
          };
          this.months.forEach((month) => {
            row.salesData.push(item.keywordProperty[month] || 0);
          });
          this.tableData.push(row);
        });

        // return;

        let order = { date: [], data: [] };
        order.date = response.categorySaleStatisticsTend.map(
          (item) => item.dataDateUnit
        );
        response.categorySaleStatisticsTend.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;

        console.log(JSON.stringify(order.data));
        const keyArray = Object.keys(order.data[1]);
        console.log(JSON.stringify(keyArray));
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key] || 0),
            type: "line",
          });
        });

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "2%",
            bottom: "10%",
          },
          // 提示框
          tooltip: { trigger: "axis" },
          xAxis: {
            data: xData,
          },
          yAxis: {},
          legend: {
            data: keyArray,
          },
          series,
        };

        //   myChart.setOption(option);
        var myChartDom = this.$refs.salesQuantity;

        // 检查是否已经存在ECharts实例
        if (echarts.getInstanceByDom(myChartDom)) {
          // 如果存在，销毁它
          echarts.getInstanceByDom(myChartDom).dispose();
        }

        // 初始化新的ECharts实例
        var myChart = echarts.init(myChartDom);
        // if (response.length == 0) {
        //   return;
        // } else {
        myChart.setOption(option);
        // const E = echarts.init(this.$refs.salesQuantity);

        // E.setOption(option);
      });
    },
  },
};
</script>
商品销售金额

999,999


商品退款金额

999,999


商品销售件数


/** 销售金额 */
@Excel(name = "销售金额")
private Double salesAmount;

/** 退款金额 */
@Excel(name = "退款金额")
private Double returnAmount;

/** 销售件数 */
@Excel(name = "销售件数")
private Integer salesNumber;

/** 昨日销售金额 */
@Excel(name = "昨日销售金额")
private Double salesAmountYesterday;

/** 昨日退款金额 */
@Excel(name = "昨日退款金额")
private Double returnAmountYesterday;

/** 昨日销售件数 */
@Excel(name = "昨日销售件数")
private Integer salesNumberYesterday;

/** 商品访客数 */
@Excel(name = "商品访客数")
private Integer visitors;

/** 库存数量 */
@Excel(name = "库存数量")
private Integer inventoryQuantity;

/** 销售目标 */
@Excel(name = "销售目标")
private Double targetAmount;

/** spu款式数量 */
@Excel(name = "spu款式数量")
private Integer spuQuantity;

/** 本月上新spu种类数量 */
@Excel(name = "本月上新spu种类数量")
private Integer spuQuantityLastMonth;

/** sku种类数量 */
@Excel(name = "sku种类数量")
private Integer skuQuantity;
/** 本月新增sku种类数量 */
@Excel(name = "本月新增sku种类数量")
private Integer skuQuantityLastMonth;

/** 商品出库件数 */
@Excel(name = "商品出库件数")
private Integer outWarehouseQuantity;

/** 昨日商品出库件数 */
@Excel(name = "昨日商品出库件数")
private Integer outWarehouseQuantityYesterday;

/** 在销商品数量 */
@Excel(name = "在销商品数量")
private Integer onSaleQuantity;

/** 目标完成率 */
@Excel(name = "目标完成率")
private Double completeRate;